<tr id="product-{{ product.id }}" class="hover:bg-gray-100 dark:hover:bg-gray-700">
  <td class="w-4 p-4">
    <div class="flex items-center">
      <input id="checkbox-{{ product.id }}" aria-describedby="checkbox-1" type="checkbox"
        class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600">
      <label for="checkbox-{{ product.id }}" class="sr-only">checkbox</label>
    </div>
  </td>
  <td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
    <div class="text-base font-semibold text-gray-900 dark:text-white">{{ product.name }}</div>
  </td>
  <td
    class="max-w-sm p-4 overflow-hidden text-base font-normal text-gray-500 truncate xl:max-w-xs dark:text-gray-400">
    {{ product.info }}
  </td>
  <td class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white">
    #{{ product.id }}</td>
  <td class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white">
    ${{ product.price }}</td>

    <td class="p-4 space-x-2 whitespace-nowrap">
      <button 
        type="button" 
        data-modal-target="edit-product-{{ product.id }}" 
        data-modal-toggle="edit-product-{{ product.id }}" 
        class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg {% if not request.user.is_authenticated %} bg-blue-400 dark:bg-blue-500 cursor-not-allowed {% else %} bg-blue-700 dark:bg-blue-600 hover:bg-blue-800 dark:hover:bg-blue-700 {% endif %} focus:ring-4 focus:ring-primary-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-primary-800"
        {% if not request.user.is_authenticated %} disabled {% endif %}
      >
        Update
      </button>
      <button 
        type="button"
        data-modal-target="delete-product-{{ product.id }}" 
        data-modal-toggle="delete-product-{{ product.id }}" 
        class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg {% if not request.user.is_authenticated %} bg-red-400 dark:bg-red-500 cursor-not-allowed {% else %} bg-red-700 dark:bg-red-600 hover:bg-red-800 dark:hover:bg-red-700 {% endif %} focus:ring-4 focus:ring-red-300 dark:focus:ring-red-900"
        {% if not request.user.is_authenticated %} disabled {% endif %} 
      >
        Delete
      </button>
    </td>

</tr>
